<template>
  <div class="login-container">
    <el-card class="login-card">
      <div class="avatar-box">
        <img src="../assets/avatar.jpg" alt="avatar" />
      </div>
      <h2 class="title">管理员登录</h2>
      <el-form
          :model="form"
          :rules="rules"
          ref="loginForm"
          label-position="top"
          class="login-form">
        <el-form-item prop="username">
          <el-input
              v-model="form.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="form.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="login()">登录</el-button>
        </el-form-item>
        <div class="login-options">
          <el-link type="primary" @click="jump()">用户登录</el-link>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import ValidCode from "@/components/ValidCode.vue";
import request from "@/utils/request";

export default {
  name: "Login",
  created() {
    document.title = '欢迎登录';
  },
  components:{
    ValidCode,
  },
  data() {
    return {
      form: {
        username:'admin',
        password: '123'
      },
      validCode: "",
      // 表单数据验证规则
      rules: {
        username: [
          { required: true, message: "请输入用户昵称:)", trigger: "blur" },
          {
            min: 2,
            max: 25,
            message: "长度在 2 到 25 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码~~", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1到 15 个字符", trigger: "blur" },
        ],
        // validCode: [
        //   { required: true, message: "请输入验证码~~", trigger: "blur" }
        // ],
      },
    }
  },
  methods: {
    // 从验证码子组件里面获取正确的验证码
    getValidCode(data){
      this.validCode = data;
    },
    login() {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          console.log('Sending request to:', '/AdminLoginServlet')
          
          const params = new URLSearchParams();
          params.append('username', this.form.username);
          params.append('password', this.form.password);
          
          console.log('Request data:', Object.fromEntries(params));
          
          request.post('/AdminLoginServlet', params)
            .then(res => {
              console.log('Response:', res)
              if (res === 1) {
    
                  this.$router.push('/home')
                  this.$message.success('登录成功')
                  localStorage.setItem('email', this.form.username);

                }
             
            })
            .catch(error => {
              console.error('Login error details:', error)
              this.$message.error('连接服务器失败: ' + error.message)
            })
        }
      })
    },
    jump(){
      this.$router.push('/manageLogin');
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

.login-card {
  width: 400px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.avatar-box {
  text-align: center;
  margin-bottom: 30px;
  
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
}

.title {
  text-align: center;
  color: #303133;
  margin-bottom: 30px;
}

.login-form {
  .el-form-item {
    margin-bottom: 20px;
  }
  
  .el-input {
    .el-input__inner {
      border-radius: 4px;
    }
  }
}

.login-btn {
  width: 100%;
  border-radius: 4px;
  margin-top: 10px;
  background: #ff9a9e;
  border-color: #ff9a9e;
  
  &:hover {
    background: darken(#ff9a9e, 10%);
    border-color: darken(#ff9a9e, 10%);
  }
}

.login-options {
  text-align: center;
  margin-top: 15px;
}
</style>